import "./index.scss";
import {useNavigate,useLocation} from 'react-router-dom'
import { useState } from "react";
import {Tabs, Form, Modal, message} from "antd";
import http from "../../../utils/http"
import TextArea from "antd/es/input/TextArea";


const Details4 = () => {
  //返回行政许可页面
  const navigate=useNavigate();
  const back=()=>{
      navigate('/home/examination')
  }

  //取数据
  const state = useLocation()
  console.log('state',state.state)

  //时间转换
  const toDub = (n:any) => (n < 10 ? "0" + n : "" + n);
  //年月日时分秒
  const toTime = (date:any) => {
    const oTime = new Date(date);
    return (
      oTime.getFullYear() +
      "-" +
      toDub(oTime.getMonth() + 1) +
      "-" +
      toDub(oTime.getDate()) +
      " " +
      toDub(oTime.getHours()) +
      ":" +
      toDub(oTime.getMinutes()) +
      ":" +
      toDub(oTime.getSeconds())
    );
  };


  //标签页
  const onChange = (key: string) => {
    console.log(key);
  };

  const tabItem = [
    {
      label: "基本信息",
      key: "1",
      children: (
        <>
          <div className="context-box">
            <div className="context">
              <div className="tr">
                <div className="td">许可证编码</div>
                <div>{state.state.onum}</div>
              </div>
              <div className="tr">
                <div className="td">办学地址</div>
                <div>{state.state.oaddress}</div>
              </div>
              <div className="tr">
                <div className="td">办学性质</div>
                <div>营利性培训机构</div>
              </div>
              <div className="tr">
                <div className="td">培养目标</div>
                <div>{state.state.ogoal}</div>
              </div>
              <div className="tr">
                <div className="td">办学层次</div>
                <div>培训机构</div>
              </div>
              <div className="tr">
                <div className="td">办学形式与类型</div>
                <div>函授</div>
              </div>
              <div className="tr">
                <div className="td">招生范围及对象</div>
                <div>{state.state.orange}</div>
              </div>
            </div>
          </div>
        </>
      ),
    },
    {
      label: "培训课程",
      key: "2",
      children: (
        <>
          <div className="context-box">
            <div className="context">
              <div className="tr">
                <div className="td">培训课程</div>
                <div>{state.state.ocourse}</div>
              </div>
              <div className="tr">
                <div className="td">培训形式</div>
                <div>{state.state.oform}</div>
              </div>
              <div className="tr">
                <div className="td">教学费</div>
                <div>2000元</div>
              </div>
              <div className="tr">
                <div className="td">教材费</div>
                <div>100元</div>
              </div>
              <div className="tr">
                <div className="td">总课时</div>
                <div>64</div>
              </div>
            </div>
          </div>
        </>
      ),
    },
  ];

  //审批不通过
  const [isModalOpen3, setIsModalOpen3] = useState(false);
  //审批通过
  const [isModalOpen4, setIsModalOpen4] = useState(false);

  //待审批不通过按钮
  const [val3] = Form.useForm();
  const showModal3 = (record: any) => {
    val3.setFieldsValue({ ...record });
    setIsModalOpen3(true);
  };
  const handleOk3 = () => {
    const data3 = val3.getFieldsValue(true);
    console.log("data3", data3);
    http({
      url: "/editStateFour",
      method: "post",
      data: {
        id: state.state.id,
        ostate: "未通过",
        owhy: data3.owhy,
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("不通过成功");
        navigate("/home/examination");
        setIsModalOpen3(false);
      } else {
        message.error("不通过失败");
      }
    });
  };
  const handleCancel3 = () => {
    setIsModalOpen3(false);
  };
  //待审批通过按钮
  const [val4] = Form.useForm();
  console.log(val4, "通过val4");
  const showModal4 = (record: any) => {
    val4.setFieldsValue({ ...record });
    setIsModalOpen4(true);
  };
  const handleOk4 = () => {
    const data4 = val4.getFieldsValue(true);
    http({
      url: "/editStateTwo",
      method: "post",
      data: {
        id: state.state.id,
        ostate: "待教育局审核",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("通过成功");
        navigate("/home/examination");
        setIsModalOpen4(false);
      } else {
        message.error("通过失败");
      }
    });
  };
  const handleCancel4 = () => {
    setIsModalOpen4(false);
  };

  return (
    <div className="details4">
      <div className="top">
        <div className="top-l">
          <p className="title" onClick={back}>行政许可审批</p>
          <div>&gt;</div>
          <p className="detail">培训机构详情</p>
        </div>
      </div>

      <div className="hr"></div>

      <div className="chooseThrough">
        <div className="chooseLeft">
          <div className="bigName">
            <p>{state.state.oname}</p>
            <span>{state.state.ostate}</span>
          </div>
          <p>备案类型：{state.state.otype}</p>
          <p>提交时间：{toTime(state.state.otime)}</p>
        </div>
        <div className="chooseRight">
          <div className="one" onClick={showModal3}>
            不通过
          </div>
          <div className="two" onClick={showModal4}>通过</div>
        </div>
      </div>

      {/* 标签页 */}
      <Tabs
          defaultActiveKey="1"
          onChange={onChange}
          items={tabItem}
          className='tab'
        />

        {/* 审批不通过弹框*/}
      <Modal
        title="不通过"
        open={isModalOpen3}
        onOk={handleOk3}
        onCancel={handleCancel3}
        okText={"确认"}
        cancelText={"取消"}
      >
        <Form
          form={val3}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 24,
          }}
          autoComplete="off"
        >
          <Form.Item name="owhy">
            <TextArea rows={4} placeholder="请输入不同意理由" />
          </Form.Item>
        </Form>
      </Modal>
      {/* 审批通过弹框 */}
      <Modal
        title="通过"
        open={isModalOpen4}
        onOk={handleOk4}
        onCancel={handleCancel4}
        okText={"确认"}
        cancelText={"取消"}
      >
        <Form
          form={val4}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 24,
          }}
          autoComplete="off"
        >
          <Form.Item name="owhy">
            <TextArea rows={4} placeholder="请输入审核意见" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
export default Details4;